<template>
  {{ meta }}
  <el-divider direction="vertical"></el-divider>
  <el-button @click="changeDB">change db</el-button>
  <el-button @click="changeEntity">change entity</el-button>
  <el-divider></el-divider>

  <el-progress
      v-if="loading&&status.payload"
      :percentage="status.payload.percentage"
      :stroke-width="24"
      text-inside
      status="success"
      style="width: 100%"
  ></el-progress>
  <el-card
      v-else
      v-loading="loading"
  >
    <el-input
        v-model="includes.name"
        style="width: 100px"
        placeholder="search"
    />
    <el-divider direction="vertical"></el-divider>
    <el-button @click="save({name: 'lyp'})" type="success">insert</el-button>
    <el-button @click="drop" type="danger">drop</el-button>
    <el-button @click="upload(data)">upload</el-button>
    <el-button @click="upload(data)">update</el-button>
    <el-divider direction="vertical"></el-divider>
    <el-tooltip>
      <el-tag type="primary">Query</el-tag>
      <template #content>{{ query }}</template>
    </el-tooltip>
    <el-divider direction="vertical"></el-divider>
    <el-tooltip>
      <el-tag type="info">MetaView</el-tag>
      <template #content>{{ view }}</template>
    </el-tooltip>
  </el-card>
  <div v-loading="loading">
    <el-table :data="results" border>
      <template v-for="(field, prop) in view.fields">
        <el-table-column :label="field.label" :prop="prop">
          <template #default="{row}">
            {{ row[prop] }}
          </template>
        </el-table-column>
      </template>
      <el-table-column width="150" label="操作">
        <template #default="{row}">
          <el-button size="small" type="warning" plain @click="save({id:row.id, name:'griffin'})">edit</el-button>
          <el-button size="small" type="danger" plain @click="remove(row.id)">delete</el-button>
        </template>
      </el-table-column>

    </el-table>
    <el-card>
      <el-pagination
          background
          :total="info.total"
          v-model:current-page="query.page"
          v-model:page-size="query.size"
          :page-sizes="[10,20,50,100]"
          layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination>
    </el-card>
  </div>
</template>
<script setup lang="ts">

import {reactive, ref} from "vue";
import type {Meta} from "../../morghulis/types/tool/meta.types.ts";
import {type QueryBean} from "../../morghulis/tools/query.ts";
import {useMorghulisDao} from "../../morghulis/tools/dao_morghulis.ts";
import _ from "lodash";

const includes = ref({name: null})
const queryBean = reactive<QueryBean>({size: 10, page: 1, includes: includes.value})
const meta = reactive<Meta>({db: 'orm', entity: 'valar_test.Valar'})


const {
  query,
  info,
  results,
  upload,
  load,
  drop,
  save,
  remove,
  status,
  view,
  loading
} = useMorghulisDao(meta, queryBean)


function changeDB() {

}

function changeEntity() {
  meta.entity = meta.entity === 'data.Meta' ? 'valar_test.Valar' : 'data.Meta'
}

const data = _.range(5000).map(i => ({name: i}))

</script>
